/**
  * Sliding tiles - bordered
  *
  * @author jh3y
*/

$size: 20px;
$duration: 2s;
$container-size: $size * 2.5;
$perspective: $container-size;
$reset: translate(-50%, -50%);

@keyframes sliding-tile-bordered {
  0% {
    transform: $reset translate(-50%, -50%);
  }
  10% {
    transform: $reset translate(50%, -50%);
  }
  20%,
  80% {
    transform: $reset translate(50%, 50%);
  }
  90% {
    transform: $reset translate(-50%, 50%);
  }
  100% {
    transform: $reset translate(-50%, -50%);
  }
}

@keyframes sliding-tile-bordered-2 {
  0% {
    transform: $reset translate(50%, 50%);
  }
  10% {
    transform: $reset translate(-50%, 50%);
  }
  20%,
  80% {
    transform: $reset translate(-50%, -50%);
  }
  90% {
    transform: $reset translate(50%, -50%);
  }
  100% {
    transform: $reset translate(50%, 50%);
  }
}

@keyframes tile-rotate {
  0%,
  20% {
    transform: perspective($perspective) rotateY(0deg);
  }
  30%,
  70% {
    transform: perspective($perspective) rotateY(180deg);
  }
  80%,
  100% {
    transform: perspective($perspective) rotate(360deg);
  }

}


.sliding-tiles-bordered {
  animation: tile-rotate ($duration * 2) infinite linear;
  border: 4px solid var(--primary);
  height: $container-size;
  left: 50%;
  margin-left: -($container-size / 2);
  margin-top: -($container-size / 2);
  position: absolute;
  top: 50%;
  width: $container-size;

  &:after,
  &:before {
    animation: sliding-tile-bordered $duration infinite linear;
    background-color: var(--primary);
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: $size;
    width: $size;
  }

  &:after {
    animation: sliding-tile-bordered-2 $duration infinite linear;
  }

}
